<template>
  <div class="shopcar-container">
    <van-swipe-cell right-width="50" :before-close="onClose">
      <div class="shopcart-box">
        <van-checkbox
          v-model="checked"
          checked-color="#F63515"
          @change="changeBox($event, car.productId)"
        ></van-checkbox>
        <img :src="car.imageHost + car.mainImage" />
        <div class="shopcart-item-info">
          <p class="shopcart-name">
            {{ car.name }}
          </p>
          <p class="shopcart-subtitle">{{ car.subtitle }}</p>
          <div class="shopcart-stepper">
            <span class="shopcart-price">￥{{ car.price }}</span>
            <van-stepper
              v-model="value"
              min="1"
              @change="changeValue($event, car.productId)"
            />
          </div>
        </div>
      </div>
      <template slot="right">
        <van-button square type="danger" text="删除" />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { delCar } from "../api/axios";
export default {
  name: "shopcartBox",
  props: {
    car: Object,
  },
  data() {
    return {
      checked: false,
      value: this.car.count,
    };
  },
  mounted() {
    this.$bus.$on("change", (e) => {
      this.checked = e;
    });
  },
  methods: {
    onClose({ position, instance }) {
      switch (position) {
        case "outside":
          instance.close();
          break;
        case "right":
          Dialog.confirm({
            message: "确定删除吗？",
          }).then(() => {
            const params = {
              id: this.car.id,
            };
            console.log(params);
            // 发送删除数据请求
            delCar(params).then((res) => {
              // console.log(res);
              console.log(this.car);
              if (res.status == 0) {
                instance.close();
                this.$bus.$emit("delCar", this.car.id);
                this.$Toast(res.msg);
              } else {
                this.$Toast(res.msg);
              }
            });
          });
          break;
      }
    },
    //选中逻辑
    changeBox(e, id) {
      let carList = this.$store.state.cars;
      carList.forEach((item) => {
        if (item.id == id) {
          item.ischecked = e;
        }
      });
      // console.log("修改好的数据", carList);
    },
    //加减逻辑
    changeValue(e, id) {
      this.$store.state.cars.forEach((item) => {
        if (item.id == id) {
          item.count = e;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../common/style/mixin.scss";
.shopcar-container {
  .shopcart-box {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    height: 200px;
    img {
      width: 180px;
      height: 180px;
      margin: 0 10px;
    }

    .shopcart-item-info {
      display: flex;
      flex: 70%;
      flex-direction: column;
      justify-content: space-between;

      .shopcart-name {
        height: 70px;
        font-size: 26px;
        overflow: hidden;
      }

      .shopcart-subtitle {
        font-size: 24px;
        color: #999;
      }

      .shopcart-stepper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .shopcart-price {
          font-size: 30px;
          color: $red;
        }
      }
    }
  }
  .van-button {
    height: 200px;
    width: 100px;
  }
}
</style>